import { Button, Form, Input } from 'antd';
import { useState } from 'react';
import axios from 'axios';
import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import { useTranslation } from 'react-i18next';
import styles from './index.module.scss';
import image1 from './assets/image_1.png';
import successPng from './assets/success.png';


export default function GeneratedComponent() {
  const {t} = useTranslation();
  const [isSuccess, setIsSuccess] = useState(false);

  const [loading, setLoading] = useState(false);
  
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onFinish = async (values: any) => {
    setLoading(true);
    try {
      const response = await axios.post('/api/contact', values);
      if (response.status === 200) {
        setIsSuccess(true);
      }
    } catch (error) {
      console.error('Error submitting form:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ paddingTop: 47 }}>
      <Navigation />
      <div className={styles.page}>
        <div className={styles.wrap}>
          <div className={styles.container}></div>
        </div>
        <div className={styles.wrap1}>
          <img src={image1} className={styles.wrap1_img} alt="" />
        </div>
        <div className={styles.layout}>
          <div className={styles.wrap2}>
            <div className={styles.container2}>
              <div className={styles.text}>{t('联系我们')}</div>
              <div className={styles.text1}>
                <span className={styles.text1__seg0}>
                  {t('无论您是科研机构、教育组织，还是关注色觉差异的个人，您的参与都将为3亿人打开新的视界。')}
                </span>
              </div>
            </div>
          </div>
          <div className={styles.wrap3}>
            {isSuccess
              ? (
                <div style={{display: 'flex', height: '100%', width: '100%', alignItems: 'center', flexDirection: 'column', justifyContent: 'center', fontFamily: 'PingFang SC'}}>
                    <img src={successPng} style={{width: 60, height: 60}} alt="" />
                    <div style={{fontSize: 36, fontWeight: 600, color: 'black', marginTop: 15, marginBottom: 12}}>{t('提交成功')}</div>
                    <div style={{fontSize: 13.5, color: 'rgba(32, 32, 32, 0.6)'}}>{t('感谢您的关注，我们将会尽快与您联系。')}</div>
                </div>
                )
              : (
                <Form
                  name="basic"
                  style={{ width: '100%' }}
                  onFinish={onFinish}
                  autoComplete="off"
                  layout="vertical"
                >
                  <Form.Item
                    label={t('姓名')}
                    name="name"
                    rules={[{ required: true, message: t('请输入姓名') }]}
                  >
                    <Input placeholder={t('请输入姓名')} />
                  </Form.Item>

                  <Form.Item
                    label={t('邮箱')}
                    name="email"
                    required
                    rules={[
                      {
                        validator(_, value) {
                          if (value) {
                            if (/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,7}$/.test(value)) {
                              return Promise.resolve();
                            }
                            else {
                              return Promise.reject(new Error(t('请输入正确的邮箱')));
                            }
                          }
                          else {
                            return Promise.reject(new Error(t('请输入邮箱')));
                          }
                        },
                      },
                    ]}
                  >
                    <Input placeholder={t('请输入邮箱')} />
                  </Form.Item>
                  <Form.Item name="school" label={t('您来自哪所学校/机构？')}>
                    <Input placeholder={t('请输入学校/机构名称')} />
                  </Form.Item>

                  <Form.Item name="collaborate" label={t('合作意向')}>
                    <Input placeholder={t('请输入合作意向')} />
                  </Form.Item>

                  <Form.Item name="other" label={t('有什么想对我们说的吗？')}>
                    <Input.TextArea placeholder={t('请输入内容')} showCount maxLength={100} />
                  </Form.Item>

                  <Form.Item label={null}>
                    <Button 
                      type="primary" 
                      style={{ width: 405, height: 36.5, background: '#0d99ff', borderRadius: 0 }} 
                      htmlType="submit"
                      loading={loading}
                    >
                      {t('提交')}
                    </Button>
                  </Form.Item>
                </Form>
              )
            }
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}
